<template>
    <view class="camera-container">
        <button @click="takePhoto" class="camera-btn" type="primary">
            拍照
        </button>
        <button @click="getsupportedImage" class="camera-btn" type="primary">
            supportedImage
        </button>
        <view class="image-preview" v-if="imagePath">
            <image :src="imagePath" class="preview-img" mode="aspectFit"></image>
        </view>
        <view class="placeholder" v-else>
            <text class="placeholder-text">点击拍照按钮开始拍照</text>
        </view>

        <view v-if="supportedImageFormats.length > 0">
            <text class="supported-image-title">支持的图片格式:</text>
            <view v-for="(format, index) in supportedImageFormats" :key="index">
                <text class="supported-image-format">{{ format }}</text>
            </view>
            
        </view>
        <view v-if="supportedImageResolutions.length > 0">
                <text class="supported-image-title">支持的图片分辨率:</text>
                <view v-for="(resolution, index) in supportedImageResolutions" :key="index">
                    <text class="supported-image-format">{{ resolution }}</text>
                </view>
            </view>
    </view>
</template>

<script>
export default {
    name: 'x-camera',
    data() {
        return {
            imagePath: '', // 存储拍照后的图片路径
            supportedImageFormats: [],
            supportedImageResolutions: [],
        }
    },
    methods: {
        takePhoto() {
            // #ifdef APP-PLUS
            // 检查是否支持plus环境
            if (!plus) {
                uni.showToast({
                    title: '当前环境不支持plus功能',
                    icon: 'none'
                });
                return;
            }

            // 获取摄像头对象
            const camera = plus.camera.getCamera();

            // 拍照参数配置
            const options = {
                filename: '_doc/camera/', // 保存路径，不设置具体名，由系统决定
                index: 1, // 使用后置摄像头
                optimize: false, // 禁用优化。可能会省点资源
                // resolution // 安卓上不支持
                // crop: { // 开启后，拍照完会弹出裁剪的窗口。确定后，会得到裁剪的小图。可以大幅度优化上传文件的尺寸。
                //     quality: 30,
                //     width: 200,
                //     height: 200,
                //     resize: true,
                //     saveToAlbum: true // 裁剪后得到的小图并没有保存到相册，而是拍照时的原图保存相册了。这要看硬件的具体表现吗？跟文档上说的不一样
                // }
            };

            // 开始拍照
            camera.captureImage(
                (path) => {
                    // 拍照成功回调
                    console.log('拍照成功，图片路径：', path);
                    this.imagePath = path;

                    uni.getImageInfo({
                        src: path,
                        success: (imageInfo) => {
                            console.log('图片信息：', imageInfo);

                            uni.compressImage({
                                src: path,
                                quality: 50, // 20 太低了，都马赛克了。的确可以压缩，保存后图片就变小了。压缩效率很高，3mb 变成了 5kb
                                
                                compressedWidth: 200,
                                compressedHeight: 200,
                                success: (res) => {
                                    console.log('压缩成功：', res);
                                    this.imagePath = res.tempFilePath

                                    uni.saveImageToPhotosAlbum({
                                        filePath: res.tempFilePath,
                                        success: () => {
                                            console.log('保存成功');
                                        },
                                        fail: (error) => {
                                            console.error('保存失败：', error);
                                        }
                                    })
                                },
                                fail: (error) => {
                                    console.error('压缩失败：', error);
                                }
                            
                            })

                        },
                        fail: (error) => {
                            console.error('获取图片信息失败：', error);
                        }

                    })

                    uni.showToast({
                        title: '拍照成功',
                        icon: 'success'
                    });
                },
                (error) => {
                    // 拍照失败回调
                    console.error('拍照失败：', error);
                    uni.showToast({
                        title: '拍照失败：' + error.message,
                        icon: 'none'
                    });
                },
                options
            );
            // #endif

            // #ifndef APP-PLUS
            // 非APP环境提示
            uni.showToast({
                title: '此功能仅在APP环境下可用',
                icon: 'none'
            });
            // #endif
        },
        getsupportedImage() {
            const camera = plus.camera.getCamera();
            this.supportedImageFormats = camera.supportedImageFormats
            this.supportedImageResolutions = camera.supportedImageResolutions
        }
    }
}
</script>

<style scoped>
.camera-container {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.camera-btn {
    width: fit-content;
    height: 50px;
    margin-bottom: 20px;
}

.image-preview {
    width: 300px;
    height: 300px;
    border: 2px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
}

.preview-img {
    width: 100%;
    height: 100%;
}

.placeholder {
    width: 300px;
    height: 300px;
    border: 2px dashed #ccc;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9f9f9;
}

.placeholder-text {
    color: #999;
    font-size: 14px;
}
</style>